<template>
  <div class="content_box">
    <!-- 公告 -->
    <!-- <div class="notice_box">
      <img src="@/assets/tips.png" alt="" />
      <span>公告： </span>
      <p>
        2024-02-10起，平台升级案件规定属性，更加便利查看或编辑，如遇问题，可以向上级反馈！
      </p>
      <span>查看详情 </span>
    </div> -->
    <div class="main-box">
      <p class="main-title">退款管理</p>

      <div class="statistics">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="box">
              <div class="title_box">
                <p class="title">待退款（元）</p>
                <p class="text">
                  <img src="@/assets/aq_icon.png" alt="" />
                </p>
              </div>
              <p class="price">
                <span>￥</span> 
                {{tjObj.pending_amount}}
              </p>
              <div class="num">
                <p>超期风险案件数<span>{{tjObj.cqfx_num}}</span></p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box">
              <div class="title_box">
                <p class="title">退款审批中（元）</p>
                <p class="text">
                  审批中心<img src="@/assets/aq_icon.png" alt="" />
                </p>
              </div>
              <p class="price">
                <span>￥</span>
                {{tjObj.processing_amount}}
              </p>
              <div class="num">
                <p>24h需审批<span>{{tjObj.processing_24h_num}}</span></p>
                <p>超时未审批<span>{{tjObj.processing_out_num}}</span></p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box">
              <div class="title_box">
                <p class="title">银行处理（元）</p>
                <!-- <p class="text">
                  <img src="@/assets/aq_icon.png" alt="" />
                </p> -->
              </div>
              <p class="price">
                <span>￥</span>
                {{tjObj.banking_amount}}
              </p>
              <div class="num">
                <p>24h未反馈<span>{{tjObj.banking_24h_num}}</span></p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索 -->
      <search-component :search-options="searchOptions" :params="params" @search="onSearch"
        @reset="onReset"></search-component>

      <!-- 切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :name="'first'+index" v-for="(item,index) in tabList" :key="index">
          <template #label>
            <span>{{item.label}}
              <span v-if="tabListIndex == index" style="color: red; font-size: 12px">({{total}}笔)</span></span>
          </template>
        </el-tab-pane>
        
      </el-tabs>

      <!-- 列表 -->
      <el-table v-loading="loading" size="1100" class="table_list" :data="tableData">
        <el-table-column prop="name" label="案件信息" min-width="450">
          <template #default="scope">
            <div class="ces_box">
              <div class="code">
                <p>案件编号 {{scope.row.case_code}}<img @click="copyCode(111)" src="@/assets/copy.png" alt="" /></p>
                <p>案件生成时间 {{scope.row.createtime}}</p>
              </div>
              <!-- <p class="up_day">最近更新时间：2天前 </p> -->
            </div>
            <div class="list">
              <div class="aj_msg">
                <p class="jiao">退<span class="new" v-if="scope.row.is_new">新</span></p>
                <div class="name">
                  <p class="title">
                    案件名称：{{scope.row.case_title}}
                  </p>
                  <p class="text">嫌疑人：{{scope.row.crime_name}}</p>
                  <p class="text"><span style="margin-right:20px;">起算日期：{{scope.row.start_date}}</span><span>起算日期：{{scope.row.end_date}}</span></p>
                  <div class="label">
                    <!-- <el-tag style="margin-right: 8px">{{scope.row.status_text}}</el-tag>
                    <el-tag>缴费中</el-tag> -->
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="退款状态" sortable min-width="120">
          <template #default="scope">
              <el-tag v-if="scope.row.status == 2" type="warning">待发起审批</el-tag>
              <el-tag v-if="scope.row.status == 3" type="primary">审批中</el-tag>
              <el-tag v-if="scope.row.status == 4" type="warning">待付款</el-tag>
              <el-tag v-if="scope.row.status == 5" type="primary">银行处理中</el-tag>
              <el-tag v-if="scope.row.status == 6" type="danger">退款失败</el-tag>
              <el-tag v-if="scope.row.status == 7" type="success">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age2" label="主办单位" min-width="180">
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.department_name}}</p>
            <p style="color:#44567C">办案人员：{{scope.row.baar_xm}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="amount_alias" label="退费金额 " min-width="200"/>
        <el-table-column prop="last_operation_time" label="退款申请时间" min-width="130">
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.last_operation_time?scope.row.last_operation_time:'--'}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="age5" label="退款完成时间 " min-width="180" sortable></el-table-column>
        <el-table-column label="操作" min-width="380" align="right" fixed="right">
          <template #default="scope">
            <el-button v-if="scope.row.show_exception" @click="warningClick" size="mini" type="danger"><el-icon class="el-icon--right">
                <Warning />
              </el-icon><span style="margin-left: 6px;">查看异常</span></el-button>
            <el-button v-if="scope.row.show_refund" size="mini" type="primary" @click="openJf(scope.row.id)">发起退款</el-button>
            <el-button size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>
            
            <el-dropdown @click="handleCommand" placement="bottom-end" @visible-change="openButton(scope.row)" style="margin-left:12px" trigger="click">
              <el-button type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu :split-button="false">
                  <!-- v-if="anniuStatus.apply_bail_delay" -->
                  <el-dropdown-item @click="downClick(1,scope.row.id,scope.row.bail_id)"  divided>案件延期申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(2,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.update_origin_attr" divided>更新原始凭证</el-dropdown-item>
                  <el-dropdown-item @click="downClick(4,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_date" divided>修改办案日期</el-dropdown-item>
                  <el-dropdown-item @click="downClick(5,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.entrust" divided>委托协办单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(6,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_bank" divided>修改办案预留银行卡</el-dropdown-item>
                  <el-dropdown-item @click="downClick(7,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.update_department" divided>修改办案单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(8,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_police" divided>修改办案人</el-dropdown-item>
                  <el-dropdown-item @click="downClick(9,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_crime_info" divided>完善当事人信息</el-dropdown-item>
                  <el-dropdown-item @click="downClick(10,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.revoke_qrcode" divided>撤销缴费申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(3,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.close_bail" divided>
                    <el-button style="width:100%" type="primary">关闭本案</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next" :total="total"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 编辑或新增页 -->
    <el-drawer v-if="dialog" size="46%" v-model="dialog" :with-header="false">
      <form-model :bailId="id" :mdl="mdl" :parent-id="parentId" @closeModel="handleCloseDialog"/>
    </el-drawer>


    <!-- 完善办案日期 -->
    <el-dialog :show-close="false" v-model="updateDateShow">
      <update-bail-date :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 案件延期申请 -->
    <el-dialog :show-close="false" v-model="updateDelayShow">
      <update-bail-delay :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案预留银行卡 -->
    <el-dialog v-model="updateBankShow" :show-close="false">
      <update-bank :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 委托协办单位 -->
    <el-dialog v-model="updateEntrustShow" :show-close="false">
      <update-entrust :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案人 -->
    <el-dialog v-model="updatePoliceShow" :show-close="false">
      <update-police :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案单位 -->
    <el-dialog v-model="updateUnitShow" :show-close="false">
      <update-unit :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 完善当事人信息 -->
    <el-dialog v-model="updateUser" :show-close="false">
      <update-user :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";

import FormModel from "./components/FormModel.vue";
import UpdateBailDate from "./components/UpdateBailDate.vue";
import UpdateBailDelay from "./components/UpdateBailDelay.vue";
import UpdateBank from "./components/UpdateBank.vue";
import UpdateEntrust from "./components/UpdateEntrust.vue";
import UpdatePolice from "./components/UpdatePolice.vue";
import UpdateUnit from "./components/UpdateUnit.vue";
import UpdateUser from "./components/UpdateUser.vue";

import { useRouter, useRoute } from "vue-router";

// 接口
import { getPlayList,getDashboard } from "@/api/bond/refund";
import { getPlayMore} from "@/api/bond/pay";
import { getPublic,getDepartmentList } from "@/api/public";

const router = useRouter();

let loading = ref(false);

let id = ref(0) // 主表id

// 参数
let params = ref({
  // case_code: '',
  // crime_name: '',
  // min_amount: Number(0),
  // max_amount: Number(0),
  // status: Number(0),
  // keyword: '',
  // department_id: '',
  // start_time: '',
  // end_time: '2024-09-17',
  page:1,
  pagesize:10,
  is_24h_time:0,
  is_out_time:0,
  status: -1,
});

// 分页
const handleCurrentChange = (e: any)=>{
  params.value.page = e
  getList(false,null)
}

// 搜索参数
let searchOptions = ref(
  [
  { label: "案件编号：", type: "input", prop: "case_code", placeholder: "请输入" },
  {
    label: "保证金金额：",
    type: "input-range",
    prop: "min_amount",
    prop1: "max_amount",
    placeholder: "请输入",
  },
  {
    label: "保证金缴费状态：",
    type: "select",
    prop: "status",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "嫌疑人姓名：",
    type: "input",
    prop: "crime_name",
    placeholder: "请输入",
  },
  {
    label: "办案单位：",
    type: "cascader",
    prop: "department_id",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "案件起始时间：",
    type: "date-range",
    prop: "name7",
    placeholder: "请选择",
    // options:agentOptions.value,
  },
]
)

onMounted(() => {

  // 列表
  getList(false,null)

  // 统计
  tongji()

  getBumenList()

  getPublicSource()
});


// 获取公共数据
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      searchOptions.value[2].options = res.data.agent
      let arr = [
        {label:'24h需审批',value:0},
        {label:'超时未审批',value:0}
      ]
      tabList.value = res.data.process_status.concat(arr)
      tabList.value.unshift({
        label:'全部',value:-1
      })
    }
  })
}

// 获取部门
const getBumenList = async()=>{
  await getDepartmentList().then(res=>{
    if(res.code == 1){
      res.data = JSON.parse(JSON.stringify(res.data).replace(/department_id/g,'value'))
      res.data = JSON.parse(JSON.stringify(res.data).replace(/name/g,'label'))
      res.data = JSON.parse(
        JSON.stringify(res.data).replace(/child/g, "children")
      );
      searchOptions.value[4].options = res.data
    }
  })
}

// 栏目切换
let tabList = ref([])
let tabListIndex = ref(0)
let activeName = ref('first0') // 切换的值

const handleClick = (e: { index: any; })=>{
  let index = e.index
  if(tabList.value[index].label == '24h需审批'){
    params.value.is_24h_time = 1
    params.value.is_out_time = 0
  }else if(tabList.value[index].label == '超时未审批'){
    params.value.is_out_time = 1
    params.value.is_24h_time = 0
  }else{
    params.value.is_24h_time = 0
    params.value.is_out_time = 0
    params.value.status = tabList.value[index].value
  }
  tabListIndex.value = index
  getList(false,null)
}

// 更多按钮-操作
let anniuStatus = ref({})// 按钮对象
const openButton = async(scope: { id: any; })=>{
  getPlayMore({process_id:scope.id}).then(res=>{
    if(res.code == 1){
      anniuStatus.value = res.data
    }
  })
}

// 按钮点击
let id1 = ref(0) // 主表id
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (num: number,eId: number,aId: number)=>{
  id1.value = eId
  bailId.value = aId
  if(num == 1){ //案件延期申请
    updateDelayShow.value = true
  }
  if(num == 7){ //修改办案单位
    updateUnitShow.value = true
  }
  if(num == 4){ //修改办案日期
    updateDateShow.value = true
  }
  if(num == 5){ //委托协办单位
    updateEntrustShow.value = true
  }
  if(num == 8){ //修改办案人
    updatePoliceShow.value = true
  }
  if(num == 9){ //完善当事人信息
    updateUser.value = true
  }
  if(num == 6){ //修改办案预留银行卡
    updateBankShow.value = true
  }
 
}

// 关闭弹窗
const closeDrawer=()=>{
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}

// 统计
let tjObj = ref({})
const tongji = async ()=>{
  await getDashboard(params.value).then(res=>{
    if(res.code == 1){
      tjObj.value = res.data
      console.log(tjObj)
    }
  })
}

// 列表
let tableData = reactive([]);
let total = ref(0)
const getList = async (status: boolean | undefined,obj: { page: number; pagesize: number; is_24h_time: number; is_out_time: number; status: number; } | null | undefined) => {
  loading.value = true
  let data = {}
  if(status){
    data = obj
  }else{
    data = params.value
  }
  await getPlayList(data).then(res=>{
    if (res.code == 1) {
      tableData = res.data.rows
      loading.value = false
      total.value = res.data.total
    }
  })
}

// 表单搜索
const onSearch = (searchData: {name7: string | any[]; }) => {
  params.value = Object.assign({},searchData)
  let obj = Object.assign({}, params.value);
  if(obj.department_id.length){
    obj.department_id = `` + obj.department_id.at(-1);
  }
  if (searchData.name7 && searchData.name7.length) {
    params.value.start_time = searchData.name7[0]
    params.value.end_time = searchData.name7[1]
    delete params.value.name7;
  }
  getList(true,obj)
  tongji()
};

// 表单重置
const onReset = () => { };

/*
 * 弹窗
 */
// 参数
let dialog = ref(false);
let mdl = reactive({});
let parentId = ref<Number>(0);

// 打开弹窗
const openJf = (e: number) => {
  dialog.value = true;
  id.value = e
};

// 关闭dialog方法
const handleCloseDialog = () => {
  dialog.value = false;
  getList()
};

/*
* 查看
*/
const toSee = (id: any) => {
  router.push({ name: "BondRefundSee", params: { id } });
};
</script>

<style lang="scss" scoped>
.ces_box{
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  font-weight: 400;
  height: 57px;
  align-items: center;
  border-radius: 8px 8px 0px 0px;
  background: #F2F4F7;
  .up_day{
    margin-right:13px;
    font-size: 14px;
    color: #999999;
  }
}
.ces_box .code{
  display: flex;
  margin-left:24px;
  font-size: 14px;
  color: #333333;
  p{
    margin-right:46px;
    display: flex;
    align-items: center;
    img{
      width: 15px;
      height: 15px;
      margin-left: 6px;
      cursor: pointer;
    }
  }
}
::v-deep .el-table .el-table__cell{
  position: initial;
}
::v-deep .el-table__body tr{
  position: relative;
  overflow: hidden;
}
.el-table {
  // --el-table-row-hover-bg-color: #1C55D1
}

</style>
  